<template>
  <view class="flex m-t20">
    <image class="avatar" :src="avatar" mode="aspectFill" />

    <view class="flex-1 flex-d-lc m-l20">
      <text class="text-700-132">{{ userInfo.nickname }}</text>
      <text class="m-t8 text-400-124">{{ userInfo.work > 0 ? `${userInfo.work}年` : '无经验' }} / {{ userInfo.highest_education }} / {{ age }}</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { computed } from 'vue'
  import { useUserStore } from '@/stores/user'
  import { genStaticUrl } from '@/utils/utils'

  const { userInfo } = useUserStore()

  const avatar = computed(() => {
    if (userInfo.avatar.startsWith('/')) {
      return genStaticUrl(userInfo.avatar)
    }

    return userInfo.avatar
  })

  const age = computed(() => {
    let ret = '--'
    try {
      if (userInfo.birthday) {
        const years = Math.floor((Date.now() - Number(new Date(userInfo.birthday))) / (365 * 24 * 60 * 60 * 1000))
        ret = `${years}岁`
      }
    } catch (_) {}

    return ret
  })
</script>

<style lang="scss" scoped>
	.avatar {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
	}
</style>
